<template>
	<div id="chart" style="width: 400px; height: 300px; margin: 0 auto;"></div>
</template>

<script>
	import {
		Toast
	} from "vant"
	import {
		getwholeData,
		getcityData
	} from '@/api/index'
	import geoJson from "./370000_full.json"; //引入josn文件
	export default {
		name: 'mapArea',
		data() {
			return {

			}
		},
		mounted() {
			this.showMap();
		},
		methods: {
			showProvince(data) {
				// console.log(data);
				let chartDom = document.getElementById('chart');
				let myChart = this.$echarts.init(chartDom);
				let name = 'shandong';
				// myChart.showLoading();
				// myChart.hideLoading();
				// console.log('地图111', name, geoJson)
				this.$echarts.registerMap(name, geoJson);
				myChart.setOption({
					color: ['#00000000'],
					grid: {
						x: 5,
						y: 5,
						x2: 5,
						y2: 5,
						// borderWidth: 1
					},
					legend: {
						show: false,
						orient: 'vertical',
						left: 'left',
						textStyle: {
							fontSize: 20,
							color: 'black' // 图例文字颜色
						},
						//data: ['地市']
						// 图例位置
					},
					visualMap: {
						show: false,
						// min: 500,
						// max: 7000,
						left: 'left',
						top: 'bottom',
						text: ['高', '低'], // 文本，默认为数值文本
						calculable: true,
						//color: ['blue', 'blue']
					},
					tooltip: {
						textStyle: {
							color: '#000000',
						},
						borderWidth: 1,
						trigger: 'item',
						position: 'bottom',
						backgroundColor: '#ffffff',
						show: true,
						// extraCssText: 'max-width:100px; white-space:pre-wrap',
						formatter: function(params) {
							if (!params.data.die_cnt) {
								params.data.die_cnt = "无"
							}
							if (!params.data.sure_cnt) {
								params.data.sure_cnt = "无"
							}
							if (!params.data.cure_cnt) {
								params.data.cure_cnt = "无"
							}
							// console.log(params);
							return "治愈数:" + params.data.cure_cnt + "<br/>" + "确诊数:" + params.data.sure_cnt +
								"<br/>" + "死亡数:" + params.data.die_cnt + "\n"

						},
					},
					series: [{
						name: '地市',
						type: 'map',
						mapType: name,
						label: {
							normal: {
								show: true
							},
							emphasis: {
								textStyle: {
									color: '#fff'
								}
							}
						},
						data: data
					}]
				});
			},
			showMap() {
				let params = {
					_app_id: "59082a00cb2a4ca686cf68f34090c4d1",
					_fetch: "1",
					_size: "500",
					_max_age: "0",
					_page: "2"
				}
				//省份
				let params2 = {
					_app_id: "59082a00cb2a4ca686cf68f34090c4d1",
					_fetch: "1",
					_size: "500",
					_max_age: "0",
					_page: "1"
				}
				getwholeData(params).then((res1) => {
					res1.data.filter(fis => fis.one_level_area == "山东省");
					getcityData(params2).then((res) => {
						res.data.filter(fis => fis.one_level_area == "山东省")
						this.showProvince([
							...res1.data.filter(fis => fis.one_level_area == "山东省" && fis
								.two_level_area != "待确认地区" && fis.two_level_area != "境外输入"),
							...res.data.filter(fis => fis.one_level_area == "山东省" && fis
								.two_level_area != "待确认地区" && fis.two_level_area != "境外输入")
						].map(pms => {
							return {
								...pms,
								name: pms.two_level_area + "市",
								value: pms.last_day_sure_cnt
							}
						}));
					}).catch((err) => {
						Toast.fail('系统异常，请稍后再试');
					})

				}).catch((err) => {
					Toast.fail('系统异常，请稍后再试');
				})


			},
		}
	}
</script>

<style>
</style>
